<template>
  <div class="container">
    <div class="container-sub border-bottom">
      <div class="score border-right">
        <div>
          <span class="commentcard-score">4.9</span>
          <span class="commentcard-text">分</span>
          <span class="commentcard-desc">很棒</span>
        </div>
        <div>
          <span class="mp-totalcommentnum">8124条评论</span>
          <span class="mp-totalcommentnum">3条攻略</span>
          <span class="iconfont rightarrow">&#xe61b;</span>
        </div>
      </div>
      <div class="simple">
        <div>
          <span class="simple-title">景点简介</span>
        </div>
        <div>
          <span class="simple-text">开放时间、贴士</span>
          <span class="iconfont rightarrow">&#xe61b;</span>
        </div>
      </div>
    </div>
    <div class="address">
      <p class="address-txt">
        <span class="iconfont address-icon">&#xe614;</span>
        广东省深圳市盐田区大梅沙东部华侨城
        <span class="iconfont address-arrow">&#xe61b;</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailBaseinfo'
}
</script>

<style lang="stylus" scoped>
  .container
    position: relative;
    top: -.1rem;
    padding: .1rem .2rem 0 .2rem;
    margin-bottom: .1rem;
    background: #fff;
    border-radius: .1rem .1rem 0 0;
    .container-sub
      padding-top: .1rem;
      padding-bottom: .2rem;
      display flex
      flex-direction row
      .score
        position: relative;
        width 50%
        .commentcard-score
          font-size: .44rem;
          color: #ff8300;
          line-height: .44rem;
        .commentcard-text
          font-size: .28rem;
          color: #ff8300;
          line-height: .48rem;
        .commentcard-desc
          font-size: .28rem;
          color: #ff8300;
          line-height: .48rem;
          margin-left: .2rem;
        .mp-totalcommentnum
          font-size: .24rem;
          color: #9e9e9e;
          line-height: .32rem;
          margin-right: .2rem;
        .rightarrow
          position: absolute;
          top: .3rem;
          right: .2rem;
          color: #9e9e9e;
          font-size: .24rem;
      .simple
        position: relative;
        width 50%
        .simple-title
          font-size: .28rem;
          color: #212121;
          line-height: .48rem;
          padding-left: .3rem;
        .simple-text
          color: #9e9e9e;
          font-size: .24rem;
          padding-left: .3rem;
        .rightarrow
          position: absolute;
          top: .3rem;
          right: 0rem;
          color: #9e9e9e;
          font-size: .24rem;
    .address
      display: block;
      position: relative;
      padding: .2rem 0;
      line-height: .36rem;
      color: #212121;
      .address-txt
        padding-right: .56rem;
        position: relative;
        padding-left: .56rem;
        .address-icon
          display: block;
          height: 100%;
          line-height: 100%;
          position: absolute;
          left: 0;
          top: .16rem;
          margin-top: -.16rem;
          margin-right: .2rem;
          color: #9e9e9e;
          font-size: .36rem;
        .address-arrow
          position: absolute;
          right: 0;
          top: 50%;
          margin-top: -.14rem;
          color: #9e9e9e;
          font-size: .24rem;
</style>
